<template>
  <!-- 秒杀列表数据 -->
  <div class="goodsList">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <!-- :key="item.title"   -->
      <div class="item1" v-for="item in goodslist1" v-show="isTrue">
        <div class="box">
          <div class="pic">
            <img :src="item.url" alt="" @click="next"/>
          </div>
          <div class="text">
            <p class="title">{{ item.title }}</p>
            <div class="price-sales">
              <div class="price">
                <p class="discount-price">{{ item.discountPrice }}</p>
                <p class="origin-price">{{ item.originPrice }}</p>
              </div>
              <div class="icon">
                <img :src="item.panicBuyUrl" alt="" />
              </div>
            </div>
          </div>
          <div class="mark">
            <slot name="mark"></slot>
            <img :src="item.markUrl" alt="" />
            <span class="must-grap">{{ item.mark }}</span>
          </div>
        </div>
      </div>
      <!-- :key="index"  -->
      <div class="item1" v-for="(item, index) in goodslist2" v-show="!isTrue">
        <div class="box">
          <div class="pic">
            <img :src="item.url" alt="" />
          </div>
          <div class="text">
            <p class="title">{{ item.title }}</p>
            <div class="price-sales">
              <div class="price">
                <p class="discount-price">{{ item.discountPrice }}</p>
                <p class="origin-price">{{ item.originPrice }}</p>
              </div>
              <div class="icon icon1">
                <img :src="item.panicBuyUrl" alt="" />
                <span class="isStarting">{{ item.start }}</span>
              </div>
            </div>
          </div>
          <div class="mark">
            <slot name="mark"></slot>
            <img :src="item.markUrl" alt="" />
            <span class="must-grap">{{ item.mark }}</span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import {reqSecKillData} from '@/request/seckillApi.js'  //引入请求的的方法
export default {
  props: ["isTrue"],
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      timeData: {},
      goodslist1: [],
      goodslist2: [],
      // 列表滚动加载数据的属性
      loading: false,
      finished: false,
    };
  },

  mounted() {
    // 初始化页面渲染的数据
    reqSecKillData().then(res=>{
      this.goodslist1 = res[0].arr1;
      this.goodslist2 = res[1].arr2;
    }).catch(err=>{console.log(err);})
  },

  methods: {
    // 列表滚动加载数据的方法
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 4; i++) {
          if(this.goodslist1.length >=8 || this.goodslist2.length >=8){
            break
          }
           // 往数据里面去追加数据
          reqSecKillData().then(res=>{
            this.goodslist1.push(res[0].arr1[i]);
            this.goodslist2.push(res[1].arr2[i])
          }).catch(err=>{console.log(err);})
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.goodslist1.length >= 8 || this.goodslist2.length >= 8) {
          this.finished = true;
        }
      }, 1000);
    },
    next(){
      this.$router.push({path:'/goodDetail'}).catch(err => {})
    }
  },
};
</script>

<style lang="less" scoped>
.goodsList {
  margin-top: 60px;
  .item1 {
    width: 100%;
    margin-bottom: 20px;
    .box {
      position: relative;
      display: flex;
      width: 96%;
      background-color: #fff;
      padding: 15px;
      margin-left: 2%;
      border-radius: 20px;
      .pic {
        width: 30%;
        img {
          width: 100%;
        }
      }
      .text {
        text-align: left;
        width: 80%;
        .title {
          width: 500px;
          color: #333;
          letter-spacing: 2px;
          font-size: 30px;
          margin-left: 15px;
        }
        .price-sales {
          display: flex;
          margin-top: 30px;
          img {
            width: 160px;
            height: 76px;
          }
          .price {
            width: 65%;
            text-indent: 15px;
            .discount-price {
              font-size: 40px;
              font-weight: 700;
              color: #ff483a;
            }
            .origin-price {
              color: #a3a3a3;
              text-decoration: line-through;
              font-weight: 600;
              font-size: 20px;
            }
          }
          .icon1 {
            position: relative;
            .isStarting {
              position: absolute;
              top: 22%;
              left: 14%;
              color: #fff;
              font-size: 30px;
            }
          }
        }
      }
      .mark {
        position: absolute;
        width: 80px;
        height: 29px;
        top: 0;
        left: 0;
        img {
          width: 73px;
        }
        .must-grap {
          position: absolute;
          top: 1px;
          left: 13px;
          color: #fff;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
